<template>
  <div>
    <div class="article-comment" :style="type==='dynamic'?{width:'816px'}:''">
      <auto-textarea ref="vNoteTextarea"
                     fontSize="14px"
                     minHeight="66px"
                     style=" border:1px solid #EFEFEF;width:100%; background-color: #F4F8FA; border-radius:4px;"
                     backgroundColor="#F4F8FA"
                     lineHeight="1.5" v-model="commentContent"
      ></auto-textarea>
      <div class="button-box">
        <p @click="dataPostComment" v-if="type!=='question'">评论</p>
        <p @click="dataPostComment" v-if="type=='question'">回答</p>
      </div>
      <div class="comments-header">
        <p class="left">
          <span v-if="type!=='question'">全部评论</span>
          <span v-if="type=='question'">全部回答</span>
          <span>{{totalRecords}}</span>
        </p>
        <div class="right">
          <p>最新</p>
<!--          <p>楼层</p>-->
<!--          <p>点赞</p>-->
        </div>
      </div>
    </div>
    <card :style="{marginTop:type==='question'?'16px':'0'}" :questionUser="questionUser" @listenCommentReget1="dataGetComment" :type="type" :id="id" v-for="(val,index) in commentList" :key="val.commentId||val.replyId" :info="val"></card>
    <p class="comment-more" @click="clickToGetMore" v-if="currentPage<pages" :style="type==='dynamic'?{width:'816px'}:''">查看更多</p>
    <p class="comment-more" v-if="commentList.length===0" :style="type==='dynamic'?{width:'816px'}:''">暂无评论</p>
  </div>

</template>

<script>
  import Card from './commentCard1';
  import config from '../../../action/config';
  import AutoTextarea from "../../common/auto-textarea/src/main";

  export default {
    data(){
       return{
         commentList:[],
         commentContent:'',
         currentPage:1,
         pages:1,
         totalRecords:0,
       }
    },
    components:{
      Card,AutoTextarea
    },
    props:{
      id:{
        type:[String,Number],
        default:''
      },
      type:{
        type:String,
        default:''
      },
      questionUser:{
        type:String,
        default:''
      }

    },
    created(){
      this.dataGetComment();
    },

    watch:{
      currentPage(){
        this.dataGetComment()
      },

    },
    methods:{


      dataPostComment(){
        if(!this.$store.state.auth.token){
          this.$message({
            type:'warning',
            message:'请在登录后评论!'
          });
          return false;
        }
        if(!this.commentContent){
          this.$message({
            type:'warning',
            message:'请输入内容!'
          });
          return false;
        }
        this.currentPage = 1;

        let url;
        let postData={
        }

        if(this.type === 'blog'){
          url = config.api.post.BlogComment.release+this.id.toString()+'/comment'
          postData.comment = this.commentContent;
        }
        if(this.type === 'project'){
          url = config.api.post.ProjectComment.release+this.id.toString()+'/comment';
          postData.comment = this.commentContent;
        }
        if(this.type === 'dynamic'){
          url = config.api.post.PostComment.release+this.id.toString()+'/comment';
          postData.comment = this.commentContent;
        }

        if(this.type === 'question'){
          url = config.api.post.QuestionReply.release+this.id.toString()+'/reply';
          postData.reply = this.commentContent;
        }
        this.$axios.$post(url,postData
        ).then((response)=>{
          if(response.code===0){
            this.commentContent='';
            this.dataGetComment();
            this.$message({
              type:'success',
              message:'发表成功!'
            })
            this.$emit(config.event.listioncommentConNumber,1)

          }else{
            this.$message({
              type:'warning',
              message:'发表失败!'
            })
          }
        })
      },

      dataGetComment(){
        if(!this.id){
          return false
        }
        let url;
        if(this.type === 'blog'){
          url = config.api.get.BlogComment.list+this.id.toString()+'/comments'
        }
        if(this.type === 'project'){
          url = config.api.get.ProjectComment.list+this.id.toString()+'/comments'
        }
        if(this.type === 'dynamic'){
          url = config.api.get.PostComment.list+this.id.toString()+'/comments'
        }
        if(this.type === 'question'){
          url = config.api.get.QuestionReply.list+this.id.toString()+'/replies'
        }

        this.$axios.$get(url,{
          params:{
            page:this.currentPage,
            size:6
          }
        }).then((response)=>{
          if(response.code===0){
            if(this.currentPage===1){
              this.commentList = response.data.dataList;
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;

            }else{
              let list = response.data.dataList;
              for(let i = 0;i<list.length;i++){
                this.commentList.push(list[i]);
              }
              this.pages  = response.data.totalPage;
              this.totalRecords = response.data.totalRecords;

            }
          }
        })
      },

      clickToGetMore(){
        if(this.currentPage<this.pages){
          this.currentPage = this.currentPage+1;
        }else{

        }
      }

    }
  }

</script>


<style lang="scss">
  .article-comment{
    width:100%;
    padding:18*$length 24*$length;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4*$length;
    overflow: hidden;
    margin-top: 16*$length;

    .release-area{
      width:100%;
      margin:0 auto;
      padding:14*$length 16*$length;
      background-color: #F4F8FA;
      border:1px solid #EFEFEF;
      border-radius:4*$length;
      @include fontStyle(12,22,500,#666666,left);
      height:66*$length;

    }

    .button-box{
      height:34*$length;
      @extend %flex-row-spb;
      justify-content: flex-end;
      margin-top: 16*$length;
      p{
        width:100*$length;
        background-color: #00AAE6;
        border-radius: 4*$length;
        @include fontStyle(12,34,500,#fff,center);
        @extend %cursorPointer;
        @extend %animate-transition;
        &:hover{
          filter: brightness(110%);
        }


      }

    }
    .comments-header{
      padding-top: 16*$length;
      margin-top: 24*$length;
      border-top: 1px solid #EFEFEF;
      @extend %flex-row-spb;

      .left{
        @include fontStyle(12,16,500,#A7A7A7,left);
        span{
          margin-right: 8*$length;
        }
      }

      .right{
        @extend %flex-row-spb;
        p{
          @include fontStyle(12,16,500,#A7A7A7,left);
          margin-left:20*$length;
          @extend %cursorPointer;
          &:hover{
            color:#000;
          }

        }

      }
    }







  }
  .comment-more{
    @include fontStyle(12,78,500,#A7A7A7,center);
    background-color: #fff;
    @extend %cursorPointer;
    @extend %animate-transition;
    border-bottom-left-radius: 4*$length;
    border-bottom-right-radius: 4*$length;
    &:hover{
      color:#00AAE6;
    }
  }
</style>
